import React, { PureComponent } from "react";
import { Row, Col, Menu, Input, Carousel } from "antd";
import "antd/dist/antd.css";
import { Link } from "react-router-dom";

export default class Banner extends PureComponent {
  render() {
    return (
      <div>
        <Row
          type="flex"
          justify="center"
          style={{ marginBottom: 20, marginTop: 20 }}
        >
          <Col span={12}>
            <Input.Search
              placeholder="输入您想查询的商品"
              enterButton
              size="large"
              onSearch={value =>
                this.props.history.push({
                  pathname: "/retailers/column",
                  state: { keyword: value, floorid: 0 }
                })
              }
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={5}>
            <Menu>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 1,
                      keyword: "ALL"
                    }
                  }}
                >
                  竞技体育器材
                </Link>
              </Menu.Item>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 2,
                      keyword: "ALL"
                    }
                  }}
                >
                  中国民间体育器材
                </Link>
              </Menu.Item>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 3,
                      keyword: "ALL"
                    }
                  }}
                >
                  健身健美体疗康复器材
                </Link>
              </Menu.Item>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 4,
                      keyword: "ALL"
                    }
                  }}
                >
                  儿童体育游艺器材
                </Link>
              </Menu.Item>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 5,
                      keyword: "ALL"
                    }
                  }}
                >
                  伤残人竞技器材
                </Link>
              </Menu.Item>
              <Menu.Item>
                <Link
                  to={{
                    pathname: "/retailers/column",
                    state: {
                      floorid: 6,
                      keyword: "ALL"
                    }
                  }}
                >
                  辅助性器材
                </Link>
              </Menu.Item>
            </Menu>
          </Col>
          <Col span={19}>
            <Carousel autoplay>
              <img
                style={{ height: 288 }}
                src={
                  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521809868&di=e927f3aaf84f2d9265c507d3210dfb11&imgtype=jpg&er=1&src=http%3A%2F%2Fimglf1.ph.126.net%2FdEzXYXLOv_tJqLOqpo6UXw%3D%3D%2F6630132081304501957.jpg"
                }
                alt=""
              />
              <img
                style={{ height: 288 }}
                src={
                  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1661805574,559996854&fm=27&gp=0.jpg"
                }
                alt=""
              />
            </Carousel>
          </Col>
        </Row>
      </div>
    );
  }
}
